<template>
  <div class="index">
    <div class="index_nav">
        <van-nav-bar
            title="SHOES服务平台-员工端"
        />
    </div>
    <div class="index_content">
        <div class="index_content_earn">
            <div>收益金额</div>
            <div><span>{{newList}}</span>元</div>
        </div>
        <div class="index_content_money">
            <div>我的金额</div>
            <div><span>{{user.money}}</span>元</div>
        </div>
        <div>
            <van-field v-model="user.username" label="会员名" left-icon="user-o" placeholder="请输入会员名"/>
            <van-field v-model="user.realname" label="真实姓名" left-icon="user-circle-o" placeholder="请输入真实姓名"/>
            <van-field v-model="user.telephone" label="联系方式" left-icon="phone-o" placeholder="请输入联系方式"/>
            <van-field v-model="user.idCard" label="身份证号" left-icon="smile-o" placeholder="请输入身份证号"/>
            <van-field v-model="user.bankCard" label="银行卡号" left-icon="balance-o" placeholder="请输入银行卡号"/>
            <div class="employAddress">
              <van-field left-icon="smile-o" colon label="地址" placeholder="请输入地址" v-model="user.province"></van-field>
              <van-field label-width="0" placeholder="请输入地址" v-model="user.city"></van-field>
              <van-field label-width="0" placeholder="请输入地址" v-model="user.area"></van-field>
            </div>
        </div>
        <div class="index_button">
            <van-button type="primary" block round color="#E87C8C" @click="save">修改</van-button>
        </div>
    </div>
    <div class="app_nav">
      <van-tabbar v-model="active" active-color="#E4687D">
        <van-tabbar-item name="one" icon="home-o" to="/manager/index">首页</van-tabbar-item>
        <van-tabbar-item name="two" icon="orders-o" to="/manager/order">订单</van-tabbar-item>
        <van-tabbar-item name="three" icon="user-circle-o" to="/manager/user">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions ,mapGetters} from 'vuex'
import { Toast } from 'vant';
export default {
    data(){
        return{
            active:'one',
            username:'',
            realname:'',
            telephone:'',
            idcard:'',
            bankcard:'',
            users:{}
        }
    },
    mounted(){
        this.global.setid(this.newList);
        // console.log(this.newList)
    },
    created(){
      this.findUser(localStorage.getItem('id'))

    },
    computed:{
      ...mapState('user',['user']),
      ...mapGetters('money',['newList','all'])

    },
    methods:{
       ...mapActions('user',['findUser','saveUser']),
       save(){
         this.saveUser(this.user).then(res=>{
             Toast('修改成功');
             this.findUser(localStorage.getItem('id'))
         })
    }
    }
}
</script>
<style scope>
    .index_nav{
        border-bottom: 1px solid rgba(228, 104, 125, 0.2)
    }
    .index_content_earn{
        width:49%;
        height:80px;
        background-color: #E87C8C;
        float: left;
        text-align:center;
        font-size:18px;
    }
    .index_content_earn>div:first-child{
        margin:17px 0 5px 0;
    }
    .index_content_money{
        width:49%;
        height:80px;
        background-color: #E87C8C;
        float: right;
        text-align:center;
        font-size:18px;
    }
    .index_content_money>div:first-child{
        margin:17px 0 5px 0;
    }
    .index_button{
        margin:10px 50px 0 50px;
    }
    .employAddress>:first-child{
  /* display: inline-block; */
  float: left;
  width: 50%;
}
.employAddress>:nth-child(2),.employAddress>:nth-child(3){
  float: left;
  width: 25%;
}

</style>
